<template>
  <el-table-column
    v-if="$slots.default"
    :scoped-slot="renderHeader"
    v-bind="$attrs"
  >
    <template #default="scope">
      <slot v-bind="scope"></slot>
    </template>
  </el-table-column>
  <el-table-column v-else :scoped-slot="renderHeader" v-bind="$attrs" />
</template>

<script setup lang="ts">
defineOptions({
  name: 'TableColumn',
  inheritAttrs: false
})

// export default {
//   name: 'TableColumn',
//   props: {},
//   methods: {
//     // 表头部重新渲染-设置表头文本一行显示
//     renderHeader({ column, $index }) {
//       console.log(999, column)
//       // 新建一个 span
//       const span = document.createElement('span')
//       // 设置表头名称
//       span.innerText = column.label
//       // 设置表头样式
//       span.style.fontSize = '14px'
//       // 临时插入 document
//       document.body.appendChild(span)
//       // 重点：获取 span 最小宽度，设置当前列，注意这里加了 20，字段较多时还是有挤压，且渲染后的 div 内左右 padding 都是 10，所以 +20 。（可能还有边距/边框等值，需要根据实际情况加上）
//       column.minWidth = span.getBoundingClientRect().width + 40
//       console.log(
//         'span.getBoundingClientRect().width + 40',
//         span.getBoundingClientRect().width + 40,
//         column.minWidth
//       )
//       // 移除 document 中临时的 span
//       document.body.removeChild(span)
//       return column.label
//     }
//   }
// }
</script>
